<!-- 执行日志失败数 -->
<template>
	<el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize" :close-on-click-modal="isReadOnly" class="zs-drawer-custom" :z-index="999">
		<template #header="{ titleId, titleClass }">
			<div class="zs-drawer-header" :id="titleId" :class="titleClass">
				<i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
				<div class="zs-title zs-text-black">匹配失败数</div>
			</div>
		</template>

		<template #default>
			<div class="all-height">
				<el-input class="zs-layout-grow dashboard-projectAllListDesDialog-input" v-model="des" type="textarea" placeholder="" :disabled="true" />
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
	import { useStore } from 'vuex';
	import { ref, watch } from 'vue';
	const props = defineProps({
		isShow: { type: Boolean, default: false },
		isReadOnly: { type: Boolean, default: true },
		handleType: { type: String, default: '' },
		currentRow: { type: Object },
	});

	let store = useStore();
	const curDrawerSize = ref(store.state.uiDrawerSize);

	const emit = defineEmits(['close']);

	let isShowDrawer = ref(props.isShow);
	let des = ref('');

	watch(
		() => props.isShow,
		newVal => {
			isShowDrawer.value = newVal;
		},
	);

	watch(
		() => props.currentRow,
		newVal => {
			des.value = newVal.failDeviceNum ? newVal.failDeviceNum.join(",") : ""
		},
	);

	//关闭抽屉
	const handleClose = done => {
		emit('close', { isShow: false });
		done();
	};
</script>

<style scoped lang="scss">
	.dashboard-projectAllListDesDialog-input,
	.all-height {
		height: 100%;
	}
	:deep(.el-textarea__inner) {
		height: 100% !important;
		width: 100% !important;
		background: #f5f7fe;
	}
</style>
